
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="#{head.title}">Rookie</title>
    <meta name="description" th:content="#{head.describe}">

    <!-- Favicon and Touch Icons -->
    <link rel="icon" type="image/png" sizes="512x512" th:href="@{/assets/favicon/favicon-32x32.ico}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
</head>

<body class="light">
<header class="header">
    <h1 class="title" th:text="#{head.title}"></h1>
    <ul class="link__content">
        <li class="content__item">
            <a th:href="@{https://spring.io/projects/spring-boot}" class="link link--iocaste">
                <span>Spring Boot</span>
                <svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60"  preserveAspectRatio="none">
                    <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
                </svg>
            </a>
        </li>
        <li class="content__item">
            <a th:href="@{https://springdoc.cn/spring-boot/}" class="link link--iocaste">
                <span>Spring Boot 中文文档</span>
                <svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60"  preserveAspectRatio="none">
                    <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
                </svg>
            </a>
        </li>
        <li class="content__item">
            <a th:href="@{https://docs.spring.io/spring-boot/docs/2.3.12.RELEASE/reference/html/using-spring-boot.html#using-boot}"
               class="link link--iocaste">
                <span>SpringBoot 2.3.12.RELEASE</span>
                <svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
                    <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
                </svg>
            </a>
        </li>
        <li class="content__item">
            <a th:href="@{https://v5.bootcss.com/docs/getting-started/introduction/}"
               class="link link--iocaste">
                <span>Bootstrap 5</span>
                <svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
                    <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
                </svg>
            </a>
        </li>
        <li class="content__item">
            <a th:href="@{https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html}"
               class="link link--iocaste">
                <span>Thymeleaf</span>
                <svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
                    <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
                </svg>
            </a>
        </li>
        <li class="content__item">
            <a th:href="@{https://www.docs4dev.com/docs/zh/thymeleaf/3.0/reference/#google_vignette}"
               class="link link--iocaste">
                <span>Thymeleaf 中文</span>
                <svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
                    <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
                </svg>
            </a>
        </li>
        <li class="content__item">
            <a class="link link--iocaste" th:href="@{/auto-login(language='zh_CN')}">
                <span th:text="#{chinese}">中文</span>
                <svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
                    <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
                </svg>
            </a>
        </li>
        <li class="content__item">
            <a class="link link--iocaste" th:href="@{/auto-login(language='en_US')}">
                <span th:text="#{english}">English</span>
                <svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
                    <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
                </svg>
            </a>
        </li>
    </ul>
</header>

<div class="z-container">
    <div class="main">
        <div class="container a-container" id="a-container">
            <form class="form" id="a-form" th:method="post" th:action="@{/login}">
                <h2 class="form_title title" th:text="#{head.title}"></h2>
                <!--<div class="form__icons">
                    <img class="form__icon"
                         th:src="@{}"
                         alt="">
                    <img class="form__icon"
                         th:src="@{}">
                    <img class="form__icon"
                         th:src="@{}">
                </div>
                <span class="form__span">或使用您的邮箱账号</span>-->
                <span style="color: red;margin: 5px" th:text="${message}"
                      th:if="${not #strings.isEmpty(message)}"></span>
                <input class="form__input" name="username" type="text"
                       th:placeholder="#{login.hintUsername}"
                       th:value="${name}" required>
                <input class="form__input" name="password" type="password"
                       th:placeholder="#{login.hintPassword}"
                       th:value="${password}" required>
                <a class="link link--iocaste" th:href="@{reset-password}">
                    <span th:text="#{login.forgot}"></span>
                    <svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
                        <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
                    </svg>
                </a>
                <button class="switch__button button" th:type="submit" th:text="#{login.signIn}"></button>
            </form>
        </div>
        <div class="container b-container" id="b-container">
            <form class="form" id="b-form" th:method="post" th:action="@{/user/register}">
                <h2 class="form_title title" th:text="#{create.account}"></h2>
                <!--<span class="form__span">或使用邮箱注册</span>-->
                <input class="form__input" type="text" th:placeholder="#{login.hintUsername}" required>
                <input class="form__input" type="text" th:placeholder="#{login.hintPhone}" required>
                <input class="form__input" type="password" th:placeholder="#{login.hintPassword}" required>
                <button class="switch__button button" th:type="submit" th:text="#{register}"></button>
            </form>
        </div>
        <div class="switch" id="switch-cnt">
            <div class="switch__circle"></div>
            <div class="switch__circle switch__circle--t"></div>
            <div class="switch__container" id="switch-c1">
                <h2 class="switch__title title" th:text="#{hello.friend}"></h2>
                <p class="switch__description description" th:text="#{join.us}"></p>
                <button class="switch__button button switch-btn" th:text="#{register}"></button>
            </div>
            <div class="switch__container is-hidden" id="switch-c2">
                <h2 class="switch__title title" th:text="#{WelcomeBack}"></h2>
                <p class="switch__description description" th:text="#{please.login}"></p>
                <button class="switch__button button switch-btn" th:text="#{login.signIn}"></button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/stopExecutionOnTimeout.js}"></script>
<script>
    let switchCtn = document.querySelector("#switch-cnt");
    let switchC1 = document.querySelector("#switch-c1");
    let switchC2 = document.querySelector("#switch-c2");
    let switchCircle = document.querySelectorAll(".switch__circle");
    let switchBtn = document.querySelectorAll(".switch-btn");
    let aContainer = document.querySelector("#a-container");
    let bContainer = document.querySelector("#b-container");

    let changeForm = e => {
        switchCtn.classList.add("is-gx");
        setTimeout(function () {
            switchCtn.classList.remove("is-gx");
        }, 1500);

        switchCtn.classList.toggle("is-txr");
        switchCircle[0].classList.toggle("is-txr");
        switchCircle[1].classList.toggle("is-txr");

        switchC1.classList.toggle("is-hidden");
        switchC2.classList.toggle("is-hidden");
        aContainer.classList.toggle("is-txl");
        bContainer.classList.toggle("is-txl");
        bContainer.classList.toggle("is-z200");
    };

    let mainF = e => {
        window.CP.exitedLoop(0);
        for (var i = 0; i < switchBtn.length; i++) {
            if (window.CP.shouldStopExecution(1)) break;
            switchBtn[i].addEventListener("click", changeForm);
        }
        window.CP.exitedLoop(1);
    };

    window.addEventListener("load", mainF);

</script>
</body>

</html>
<!DOCTYPE html>